Published 2005-08-04 10:11:01

As part of the shop design, I've specified a HTML editor, similar to fckeditor or htmlarea to edit the product descriptions and information pages. However, this editor has to be embedded into a XUL interface....

My main website (not the blog bit), has an "edit this page" link at the bottom, which already uses a HTML editor inside a XUL interface, but the code behind it more a proof of concept, rather than a production toolkit. So for the shop I decided to look at cleaning this up and making it modular..

XUL has a great mechanism for adding widgets like this, with a single stylesheet include, and an XML file you can create your own custom widgets.

In the XUL interface file (your main page that you want to use the widget on), you add this line
<?xml-stylesheet href="HtmlEdit.css" type="text/css"?>
(where HtmlEdit.css is our css file for our widget.)

Then somewhere in the body, you add
 <htmledit value="hello world" />  
(telling it to use your new custom widget.)

The CSS file is very simple..
htmledit 
{
-moz-binding: url("HtmlEdit.xml#htmledit");
max-height: 200px;
}
basically using the -moz-binding attribute to map the widget to an xml file (the #htmledit, pointing to a specific binding) - as the xml file could contain multiple widget binding (although I wouldnt recommend it)

Then your HtmlEdit.xml contains the <bindings> with <content> - the xul elements that make up your widget, and <implementation> with all the properties and methods that your widget has (with javascript for the methods) - if you use mozilla's lxr and search for "<bindings", it's easy to find examples.

Now all that stuff is quite simple ;) - what I had wanted was to turn my html editor into one of these.. Not quite so simple.. mozilla's design kind of make that less than easy..
  • Mozilla has an <editor> tag, this however does not work on remote xul.. - so we have to use html:iframe, and set
    {iframeobject}.contentWindow.document.designMode = "on";
  • html:iframe's dont appear to be useable inside of <bindings>
  • even if you use the binding to append the html:iframe after it'self using DOM, you can not set the designMode, as the privaliges appear to prevent bindings doing stuff like that to the containing page.
In the end I suspect some kind of mix between a <script src="mylib.js"> and using the bindings to store the editor bar may be the best solution.. - But let's see how far I get ;)

[update] It turns out that it is feasible to put it all into a binding! - after a little hint on irc.mozilla.org#xul, I was able to create a HTMLIframeElement using importNode, and DomParser.


Mentioned By:
google.com : XUL WYSIWYG (119 referals)
google.com : xul editor (115 referals)
google.com : april (79 referals)
google.com : php xul (78 referals)
www.p4xp.com : (65 referals)
google.com : december (59 referals)
google.com : wysiwyg xul (44 referals)
google.com : xul html editor (44 referals)
google.com : wysiwyg xul editor (38 referals)
google.com : xul editors (29 referals)
www.phpn.org : XUL and HTML editors (27 referals)
google.com : fckeditor xul (27 referals)
google.com : XUL WYSIWYG EDitor (27 referals)
www.planet-php.net : Planet PHP (26 referals)
www.mister-wong.ru : wysiwyg | самые популярные | mister-wong.ru | Сервис социальных закладок (22 referals)
google.com : Debian HTML Editor (17 referals)
weblabor.hu : XUL and HTML editors | Weblabor (15 referals)
google.com : "xul to html" (12 referals)
google.com : xul to html (12 referals)
google.com : xul in html (11 referals)

Comments

OT
Sorry to say that, but it seems that this blog entry destroyed the layout of planet-php.com ;)
#0 - Octavian ( Link) on 2005-08-04 14:49:54 Delete Comment
OT
err planet-php.net of course.
Feel free to delete these comments :)
#1 - Octavian ( Link) on 2005-08-04 14:51:27 Delete Comment
Get inspired by this XUL WYSIWYG Editor
Look at this link. It will be good inspiration for you how to deal with WYSIWYG XUL Editor. They have very nice one with great functionality. I've never seen so impressive demo of on-line editor.

Check it out!
http://demo.webdevelopers.cz
(Elixon CMS/XUL with WYSIWYG XUL)
#2 - ian ( Link) on 2005-08-22 00:25:30 Delete Comment
help?
Having trouble making the editor let me insert text from a script. Basically, I've got records in a database and want to read them and display stored data into the textarea for editing. Tried

document.getElementById('editor').value = "blah"

But no worky.

Help please?
#3 - webhead ( Link) on 2006-10-21 10:17:02 Delete Comment

Add Your Comment